<template>
  <div class="renovation-list views-container">
    <div class="wlm-table">
      <div class="wlm-table-hearder-btn" style="display:flex;justify-content:space-between;">
        <!-- <el-button size="small" type="primary" @click="dialogTableVisible = false;clearfromdata()">添加域名</el-button> -->
          <router-link tag="span" to="/setting/falseUrlAdd">
                <el-button size="small" type="primary">添加域名</el-button>
            </router-link>
      </div>
      <div class="wlm-table-header" style='line-height:30px'>
        <p>注意事项：</p>
        <p>1.营销域名(砍价、拼团、抽奖)解析CNAME到：<span class="pointer" @click="handleClipboard('https://'+tableFormatData.userTable.otherData.siteurl,$event)">https://{{tableFormatData.userTable.otherData.siteurl}}</span></p>
        
        <p>2.添加域名必须以https://开头(例如：https://xxx.xxxxxx.cn);</p>

        <p>3.在微信服务号后台公众号设置 -> 功能设置 -> 设置业务域名,JS接口安全域名(例如：xxx.xxxxxx.cn);</p>

        <p>4.在微信商户平台后台 -> 产品中心 -> 开发配置 -> 支付授权目录(例如：https://xxx.xxxxxx.cn);</p>

        <p>5.点击启用。</p>
      </div>
      <div class="wlm-table-content">
        <el-table
          :ref="tableFormatData.userTable.key"
          :data="tableFormatData.userTable.tableData"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="date" label="域名">
            <template slot-scope="scope">
              <el-popover trigger="click" placement="top">
                <div class="flex-row flex-align-c" style="margin-bottom:4px;">
                  <span style="white-space: nowrap; margin-right:8px;">域名:</span>
                  <el-input
                    v-model="scope.row.url"
                    @blur="changeTableItem(scope.row.url_id,scope.row.url,scope.row.wxapp_id,scope.row.copyright)"
                    :controls="false"
                    size="mini"
                  ></el-input>
                </div>
                <div slot="reference" class="name-wrapper">
                  <el-button type="text" class="pointer">
                    <span>{{scope.row.url}}</span>
                    <svg-icon v-if="scope.row.showEditPriceBtn" icon-class="editIcon" />
                  </el-button>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="绑定平台">
            <template slot-scope="scope">
              <span>{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="是否启用">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                @change="statusChange(scope.row.url_id)"
                :active-value="1"
                :inactive-value="2"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="创建时间">
            <template slot-scope="scope">
              <span>{{scope.row.create_time}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div class="operation-group">
                <el-button class="wlm-text" type="text" @click="delTableItem(scope.row.url_id)">删除</el-button>
                 <div class="btn-line"></div>
                  <router-link tag="span" :to="{path:'/setting/falseUrlAdd',query:{
                    url_id:scope.row.url_id,
                  }}">
                      <el-button style="margin-left:10px;" class="wlm-text" type="text" >编辑</el-button>
                  </router-link>
           
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-content flex-row flex-justify-b flex-align-c">
          <el-row class="pagination-btns">
            <el-checkbox
              class="check-all"
              true-label="1"
              false-label="0"
              v-model="tableFormatData.userTable.files.checkall"
              @change="toggleSelection"
            >全部</el-checkbox>
            <el-button class="right-8" size="mini" @click="delTableList">删除</el-button>
            
          </el-row>
          <el-pagination
            :disabled="!hasTableData"
            @size-change="listPageChange"
            @current-change="listPageChange"
            :current-page.sync="tableFormatData.userTable.pagination.page"
            :page-sizes="tableFormatData.userTable.pagination.pagesizes"
            :page-size.sync="tableFormatData.userTable.pagination.list_rows"
            layout="total, sizes, prev, pager, next, jumper"
            :total="hasTableData?tableFormatData.userTable.pagination.total : 0"
          ></el-pagination>
        </div>
      </div>
    </div>

    <!-- 添加弹窗 -->
    <el-dialog
      :visible.sync="dialogTableVisible"
       @close="saveDialogForm"
      custom-class="reset-pwd wlm-form-dialog dialog-table"
      width="50%"
    >
      <div class="wlm-form">
        <div class="wlm-form-header wlm-dialog-fixheader">
          <span class="wlm-dialog-inlenr">{{!!now_url_id ? '编辑域名' : '添加域名'}}</span>
        </div>
        <el-scrollbar wrap-class="scrollbar-wrapper">
          <div class="wlm-form-content">
            <div class="wlm-dialog-main">
              <div class="wlm-dialog-content">
                <!-- 表单 -->
                <el-form
                  ref="user"
                  :model="formFormatData.formData"
                  size="small"
                  label-width="120px"
                  class="retail-form"
                  label-position="right"
                >
                  <el-form-item label="域名">
                    <el-input v-model.trim="formFormatData.formData.url"></el-input>
                  </el-form-item>
                  <el-form-item label="选择平台">
                    <ChoosePlat :response="responseFunction" v-if="!!!formFormatData.formData.wxapp_id"></ChoosePlat>
                    <div v-if="!!formFormatData.formData.wxapp_id">
                      <el-tag closable @close="closeTag">
                      {{formFormatData.formData.name}}
                    </el-tag>
                    </div>

                  </el-form-item>
                  <el-form-item label="域名版权">
                            <el-radio-group v-model="formFormatData.formData.copyright_open">
                              <el-radio :label="1">开启</el-radio>
                              <el-radio :label="2">关闭</el-radio>
                            </el-radio-group>
                  </el-form-item>
                   <el-form-item label="域名内容">
                          <ueditor
                                :ueditorChange="shopInfoChange"
                                :ueditorList="ueditorList"
                                :bindIndex="fwb_index"
                                :defaultMsg='defaultMsg1'
                                :config='{initialFrameWidth: null,initialFrameHeight: 350}'
                                ref="by_know"></ueditor>
                  </el-form-item>

                </el-form>
                <!-- 表单 -->
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
        <el-button size="small" @click="saveDialogSubmit" type="primary">保存</el-button>
      </footer>
    </el-dialog>
    <!-- 添加弹窗 -->
  </div>
</template>

<script>
import { urlIndex, urlDel, urlAddEdit, urlStatus, platformIndex,urlDetail } from '@/api/platform'
import mixins from '@/mixins/mixins'
import clipboard from '@/utils/clipboard'
import ChoosePlat from '@/components/platform/index'
import ueditor from '@/components/Ueditor/index'
// import { zipArray } from '@/utils/index'
export default {
  mixins: [mixins.getters('Table'), mixins.getters('Form')],
  name: 'RenovationList',
  components: {
    ChoosePlat,
    ueditor
  },
  computed: {},
 
  data() {
    return {
      fwb_index:1,
      // 是否显示添加弹窗
      dialogTableVisible: false,
      now_url_id: '',
       ueditorList: [],
       defaultMsg1: '',
      formFormatData: {
        key: 'user',
        model: {
          noCreateEdit: false,
          hasMessage: false,
          closeDialog: false,
          bindDialog: 'dialogTableVisible'
        },
        api: {
          editForm: {
            params: {
              bus_id: this.$route.query.bus_id
            }
          },
          submitForm: urlAddEdit,
          change: {
            status: {
              key: 'status'
            }
          }
        },
        formData: {
          url: '',
          wxapp_id: 0,
          name: '',
          url_id: this.now_url_id,
          copyright_open:2,
          copyright:'',
        }
      },
      tableFormatData: {
        current: 'userTable',
        userTable: {
          key: 'userTable',
          api: {
            getList: urlIndex,
            delList: urlDel,
            delTableList: urlDel
          },
          tableData: [],
          files: {
            ids: [],
            redirect: 'url_id'
          },
          otherData: {
            siteurl: ''
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      }
    }
  },
  created() {
    this.platformIndex()
  },
  mounted() {},
  methods: {
    showdialog(url_id){
      this.fwb_index = url_id;
        // this.formFormatData.api.submitForm = urlDetail
        // this.formFormatDialogEditEvt({ id: url_id, toggle: 'dialogTableVisible',})
         this.formFormatData.formData.copyright = '';
        this.defaultMsg1 = ''
        this.formFormatData.formData.copyright_open = 2
        this.formFormatData.formData.url = ''
        this.formFormatData.formData.name =  ''
        this.formFormatData.formData.wxapp_id = ''
        urlDetail({url_id:url_id}).then(res=>{
          if(res.data.code==1){
              this.dialogTableVisible = true
              console.log("滴滴滴滴滴滴多多",res.data.data.copyright=='')
              this.formFormatData.formData.copyright = res.data.data.copyright
              this.defaultMsg1 = res.data.data.copyright
              this.formFormatData.formData.copyright_open = res.data.data.copyright_open
              this.formFormatData.formData.url = res.data.data.url
              this.formFormatData.formData.url_id = res.data.data.url_id
              this.formFormatData.formData.name =  res.data.data.name
              this.formFormatData.formData.wxapp_id = res.data.data.wxapp_id
          }
        })
        
    },
     saveDialogForm() {
      this.formFormatData.formData = {
        url: '',
        wxapp_id: 0,
        name: '',
        url_id: this.now_url_id,
        copyright_open:2,
        copyright:'',
      }
      this.defaultMsg1=''
    },
     shopInfoChange(msg) {
            this.defaultMsg1 = msg
            console.log("fdsfdsfdsfd++++++++++",msg)
            },
    // 关闭标签时将标签类容清空
    closeTag() {
      this.formFormatData.formData.name = ''
      this.formFormatData.formData.wxapp_id = 0
    },
    // 点击添加按钮时，避免出现上一次添加的数据，将数据清空
    clearfromdata() {
      this.formFormatData.formData = {
        url: '',
        wxapp_id: 0,
        name: '',
        url_id: this.now_url_id,
        copyright_open:2,
        copyright:'',
      }
      this.defaultMsg1=''
    },
    responseFunction(row) {
      this.formFormatData.formData.name = row.name
      this.formFormatData.formData.wxapp_id = row.wxapp_id

      console.log('子组件回调', row)
    },
    platformIndex() {
      platformIndex({ all: 1 }).then(res => {
        console.log(res, 'res')
      })
    },
    // 复制当前链接
    handleClipboard(text, event) {
      clipboard(text, event)
    },
    // 直接编辑域名
    changeTableItem(url_id, url, wxapp_id) {
      urlAddEdit({ url_id, url, wxapp_id }).then(response => {
        if (!!response.data && response.data.code == 1) {
          this.$message.success('保存成功')
          this.dialogTableVisible = false
          this.getTableList()
        } else {
          this.$message.error('保存失败')
        }
      })
    },
    // 域名启用开关
    statusChange(url_id) {
      urlStatus({ url_id }).then(response => {
        if (response.data.code == 1) {
          this.getTableList()
          this.$message.success('保存成功')
        }
      })
    },
    // 保存添加
    saveDialogSubmit() {
      // this.formFormatSubmit()
       this.formFormatData.formData.copyright = this.defaultMsg1

      urlAddEdit(this.formFormatData.formData).then(response => {
        if (!!response.data && response.data.code == 1) {
          this.$message.success('保存成功')
          this.dialogTableVisible = false
          this.getTableList()
        } else {
          this.$message.error('保存失败')
        }
      })
    },
    // 表单添加成功回调
    formFormatCallBack(data, type, response) {
      console.log('回调', data, type, response)
      if (!!response.data && response.data.code == 1) {
        this.$message.success('保存成功')
      
        this.dialogTableVisible = false
        this.getTableList()
      } else {
        this.$message.error('保存失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.renovation-list {
  /deep/ .el-input-group__append {
    background: #409eff;
    color: #ffffff;
    border: 1px solid #409eff;
  }
}
</style>
